<template>
  <div class="common-layout">
    <el-container>
      <el-header>
     <div class="headMsg">
      <h3>vue3+ts项目</h3>
      <img src="@/assets/logo.png" alt="">
     </div>
     
     <el-button @click="qiut">退出</el-button>
 
      </el-header>
      <el-container class="containerbottom">

      <!-- menu -->
        <el-aside width="200px"> 
        <el-menu
        router
        active-text-color="#ffd04b"
        background-color="#545c64"
        :default-active="route.path"
        text-color="#fff"
         unique-opened
        >
        <el-sub-menu v-for="item in menulist" :key="item.name">
         <template #title  >
          <el-icon><Avatar /></el-icon>
           <span>{{item.name}}</span>
            </template>

             <el-menu-item :index="child.path" v-for="child in item.children" :key="child.name">
            <el-icon><document /></el-icon>
          <template #title>{{child.name}}</template>

          </el-menu-item>
        </el-sub-menu>
        </el-menu>
        
        </el-aside>
        <!-- main -->
        <el-main>
        <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Avatar
} from '@element-plus/icons-vue'
const router = useRouter()
import { useRoute } from 'vue-router'
import {menulist} from '../utils/menu'
 
const route = useRoute()

const qiut =()=>{
  console.log('退出')
  localStorage.getItem('token')===''
  
  router.push({path:'/login'})
}
</script>

<style lang="scss" scoped>
.common-layout{
    width: 100vw;
    height: 100vh;
}
.headMsg{
    display: flex;
     align-items: center;
}
.el-header{
    width: 100%;
    height: 60px;
    background-color: rgb(42, 77, 42);
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: space-between;
    img{
       height: 60px;
    }
}
.el-main{
 width:calc(100vw - 200px); 
 background-color: #ccc;

}

.el-aside{
width: 200px;
background-color: #333333;
}
.containerbottom{

height:calc(100vh - 60px); 
}
</style>